<template>
    <div>
        <div class="editor-title">
            <span class="editor-title__name">页面设置</span>
        </div>
        <div class="editor-two">
            <!-- <div class="editor-two__item">
                <div class="editor-two__item-head">店铺名称</div>
                <el-input v-model="pageData.navBar.title" placeholder="输入店铺名称" clearable />
            </div> -->
            <div class="cls-flex" style="padding: 1rem 0 0">
                <div class="label-con" style="flex: 1">背景颜色</div>
                <div>
                    <el-color-picker v-model="pageData.style.background" @change="color_change('background', '#f7f8fa')" />
                </div>
            </div>
            <div class="editor-two__item" style="margin-bottom: 10px">
                <div class="editor-two__item-head">分享标题<span>（不填，默认系统标题）</span></div>
                <el-input v-model="pageData.share_name" maxlength="10" placeholder="输入分享标题，最长10个字" clearable />
            </div>
            <div class="editor-two__item" style="margin-bottom: 10px">
                <div class="editor-two__item-head">分享封面<span>（长方形，建议尺寸400 x 320px或等比放大）</span></div>
                <div class="left-img" @click="clickAdd">
                    <img :src="pageData.share_cover || none_img" class="left-img" />
                    <div class="tip-con flexs">
                        <span>更换图片</span>
                        <span @click.stop="delImg">删除图片</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片库 -->
    <picture-library :show="showImg" @close="showImg = false" @select="selectImg" :select_multiple="false"> </picture-library>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue"
import PictureLibrary from "@components/PictureLibrary.vue"

const { proxy } = getCurrentInstance()

/**
 * 页面设置
 * @property {Object} pageData  页面数据
 */
const props = defineProps({
    pageData: {
        type: Object,
        default: {
            title: "花数云",
            share_name: "",
            share_cover: "", // 分享封面
            style: {
                background: "#f7f8fa",
            },
        },
    },
})

// 自定义背景色
const color_change = (key, color) => {
    if (!props.pageData.style[key]) {
        props.pageData.style[key] = color
    }
}

/**
 * 要更换的图片
 */
const showImg = ref(false)
const none_img = "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400"
const clickAdd = () => {
    showImg.value = true
}
const selectImg = (val) => {
    showImg.value = false
    props.pageData.share_cover = proxy.imgUrl + val[0].photo
}
const delImg = () => {
    props.pageData.share_cover = ""
}
</script>

<style lang="less" scoped>
.left-img {
    width: 100%;
    height: 275px;
    flex: none;
    cursor: pointer;
    position: relative;
}
.tip-con {
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    justify-content: center;
    span {
        &:last-child {
            margin-left: 40px;
        }
        &:hover {
            color: #ededed;
        }
    }
}
.editor-title {
    padding: 24px 16px;
}
.editor-two {
    padding: 12px 16px;
}
.editor-two__item {
    margin-bottom: 12px;
}
.editor-two__item-head {
    color: #333;
    display: flex;
    align-items: center;
    height: 40px;
    span {
        font-size: @font-size-sm;
    }
}
.editor-two__icon {
    color: #df4545;
    font-size: 16px;
    margin-right: 10px;
    height: 9px;
}

.editor-two__color {
    margin-top: 20px;
    width: 240px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.color-reset {
    font-size: 16px;
    color: #409eff;
    margin-right: 14px;
    cursor: pointer;
}
</style>
